<template>
  <div class="login-container">
    <van-nav-bar
      title="注册"    
      left-arrow   
      class="page-nav-bar"
      @click-left="$router.back()"
    />
  <p>欢迎注册</p>
    <van-form >
      <van-field
        icon="manager"
        v-model="acnt.mobile"
        name="手机号"
        label="手机号"
        type="number"
        placeholder="手机号"
        left-icon="manager"
        :rules="rules.mobile"
      />
      <van-field
        icon="lock"
        v-model="acnt.code"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        left-icon="lock"
        :rules="rules.codes"
      />
      <van-field
        icon="lock"
        v-model="acnt.password"
        type="password"
        name="确认密码"
        label="确认密码"
        placeholder="确认密码"
        left-icon="lock"
        :rules="rules.passwords"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" @click="panduan"
          ><span class="dl" >立即注册</span></van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import {zhuce} from '@/api/login'
export default {
  data() {
    return {
      acnt:{
        mobile: "",
        code: "",
        password: "",
      },
      rules: {
        //  哪些规则？
        // https://vant-contrib.gitee.io/vant/#/zh-CN/form#rule-shu-ju-jie-gou
        mobile: [
          { required: true, message: '请输入手机号' },
          { pattern: /^1[3|5|7|8]\d{9}$/, message: '手机号格式不正确' }
        ],
        codes: [
          { required: true, message: '请输入密码' },
          { pattern: /^\d{6}$/, message: '密码是6位数字' }
        ],
         passwords: [
          { required: false, message: '请输入密码' },
          { pattern: /^\d{6}$/, message: '密码是6位数字' }
        ],
        
      }
     
    };
  },
  methods: {
    panduan(){
     
      if(this.acnt.password === this.acnt.code){
        this.account()
        // console.log(888);
      }else  {
      //  console.log('11111111');
        alert('两次密码不一致');
      }

    },
     async account () {
      //  const acnt = this.acnt
      //   this.$toast.loading({
      //   message: '登录中...',
      //   forbidClick: true
      // })
      // console.log(acnt);
      let res
      try {
        res = await zhuce(this.acnt)
      } catch (error) {
        // 4.1 失败处理
        this.$toast.fail('注册失败')
        return console.log(error)
      }
      // 4.2 成功处理
      console.log(res)
      this.$toast.success('注册成功')
      this.$router.push('/login')
    }
  },
};
</script>

<style scoped>
p {
  font-size: 36px;
  color: #1989fa;
  text-align: center;
  height: 100px;
  line-height: 100px;
}
.dl{
  color: #fff;
  font-size: 18px;
}
</style>